<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<link rel="stylesheet" type="text/css" href="../../css/swiper.css">
<style>
.content {
	height: calc( 100vh - 2.5rem );
}
.topTit{
	text-align: center;
	font-size: 0.6rem;
}
#investproSwiper {
	width: 100%;
	overflow: hidden;
}
#investproSwiper .swiper-slide {
	width: 70%;
}
#investproSwiper .photo {
	width: 100%;
	height: 0;
	padding-bottom: 150%;
	background-position: center;
	background-size: cover;
}
.fotBtn{
	position: fixed;
	bottom: 0;
	height: 2.5rem;
	width: 100%;
	background: #fff;
	box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.06);
}
.fotBtn .comBtm{
	width: 47%;
	height: 2rem;
	line-height: 1.9rem;
	border-radius: 4px;
	color: rgb(177, 162, 162);
	text-align: center;
	border: 1px solid #e73350;
}
.buzhou{
	font-size: 0.6rem;
	color: #353336;
}
.buzhou .arrow {
	margin: 0 0.5rem;
}
</style>
</head>
<body>
<div id="data_html"></div>
<script type="text/x-dot-template" id="data_tpl">
	<div class="content aui-flex-row aui-flex-around">
		<div class="topTit color-35">邀请好友成为会员一起来有蜜省钱！</div>
		<div class="swiper-container" id="investproSwiper">
			<div class="swiper-wrapper">
				{{ for(var i in it.photos){ }}
				<div class="swiper-slide" data-src="{{= it.photos[i] }}"><div class="photo" style="background-image:url({{= it.photos[i] }})"></div></div>
				{{ } }}
			</div>
		</div>
		<div class="buzhou aui-flex-col aui-flex-center">
			<span>新用户扫二维码</span>
			<span class="arrow">→</span>
			<span>下载APP</span>
			<span class="arrow">→</span>
			<span>点击微信登录</span>
		</div>
	</div>
	<div style="height:2.5rem"></div>
	<div class="comFlexItem aui-px-15 fotBtn">
  	<input type="text" readonly style="display:none" id="foo"/>
		<div class="comBtm bg-e7 color-fff" id="copy" data-clipboard-action="copy" onclick="copyCode()" data-clipboard-target="#foo" >复制邀请码:<span id="code"></span></div>
		<div class="comBtm color-e7 bk" tapmode onclick="openShare()">发送给好友</div>
	</div>
</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<!-- <script type="text/javascript" src="../../scriipt/clipboard.min.js"></script> -->
<script type="text/javascript" src="../../script/clipboard.js"></script>

<script type="text/javascript">
	var USER_INFO;
	var CODE;
	apiready = function() {
		api.parseTapmode();
		getCode();
		getData();
	};
	function getCode(){
		api.ajax({
			url: BASE_URL + 'App/User/userInfo',
			method: 'post',
			data: {
				values: {
					userid: getUserId()
				}
			}
		}, function(ret, err) {
			if (ret && ret.code == 1) {
				USER_INFO = ret.data;
			}else{
				USER_INFO = getUserinfo();
			}
			CODE = USER_INFO.user_invitation_code;
			$$('#code').text(CODE);
			$$('#foo').val(CODE);
		});
	}
	function getData(){
		showProgress();
		var pageData = {
			photos: [],
			//code: CODE
		};
		var shareUrl = 'http://yin2.tanfangzi.com/wx/wxhtml/share_friend.html';
		api.ajax({
			url: BASE_URL + 'App/Topic/qrcodeImg',
			method: 'post',
			data: {
				values: {
					share_url: shareUrl,
					userid: getUserId(),
					img_type: 2
				}
			}
		},function(ret,err){
			if (ret && ret.code == 1 && ret.data.length) {
				pageData.photos = ret.data;
			}
			var tpl = $$('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$$('#data_html').html(tempFn(pageData));
			api.parseTapmode();
			sliderInit();
			hideProgress();
			getCode();
		});
	}
	//复制邀请码
	// function copyCode() {
	// 	console.log(CODE);
	// 	var clipBoard = api.require('clipBoard');
	// 	// var clipBoard = new Clipboard('#copy');
	// 	clipBoard.set({
	// 	    value: CODE
	// 	}, function(ret, err) {
	// 	    if (ret) {
	// 	        toast('邀请码复制成功')
	// 	    } else {
	// 	        toast('复制失败')
	// 	    }
	// 	});
	// // }
function copyCode(){
	var clipboard = new Clipboard('#copy',{
		text:function(){
			// var tex = documemt.getElementById("code")
			return CODE
		}
	});
	clipboard.on('success', function(e) {
		// console.log(JSON.stringify(e));
		toast('邀请码复制成功')
	});
	clipboard.on('error', function(e) {
		toast('复制失败')
			console.log(e);
	});
}

// function copyCode(){
// 	var clipBoard = api.require('clipBoard');
// 	clipBoard.set({
//     value: CODE
// }, function(ret, err) {
//     if (ret) {
//         alert(JSON.stringify(ret));
//     } else {
//         alert(JSON.stringify(err));
//     }
// });
// }






	//图片滚动
	function sliderInit(){
		new Swiper('.swiper-container', {
			effect: 'coverflow',
			grabCursor: true,
			centeredSlides: true,
			slidesPerView: 'auto',
			coverflowEffect: {
				rotate: 50,
				stretch: 0,
				depth: 100,
				modifier: 1,
				slideShadows : true,
			}
		});

	}
// 分享好友弹框
function openShare(){
	api.openFrame({
		name: 'share_mask',
		url: 'widget://html/share_btm_mask.html',
		rect: {
			x: 0,
			y: 0,
			w: 'auto',
			h: 'auto'
		},
		bounces: false,
		animation: {
			type: 'fade',
			duration:300
		},
		pageParam: {
			wname: api.winName,
			fname: api.frameName,
			copyBtn: false
		}
	});
}
function share(scene){
	var wx = api.require('wx');
	var imgUrl = $$('#investproSwiper .swiper-slide-active').data('src');
	api.download({
		url: imgUrl,
		savePath : 'fs://share_img/wxshareimg.jpg',
		report : false,
		cache : false,
		allowResume : false
	}, function(ret, err) {
		if (ret.state == 1) {
			//下载成功
			realPath = ret.savePath;
			wx.shareImage({
				apiKey:'',
				scene: scene,
				thumb: '',
				contentUrl: 'fs://share_img/wxshareimg.jpg'
			}, function(ret, err) {
				if (err.code==0) {
					toast('分享成功');
				} else {
					toast('分享失败');
				}
			});
		}
	});

}
</script>
</html>
